<template>
    <div class="app-container main-content">
        <Levelbar></Levelbar>
        <div class="tabelLayout-content">
            <el-table :data="tableData" v-loading="loading" class="table-list" border>
                <el-table-column label="商品打包名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.name | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="参与服务id" align="center">
                    <template scope="scope">
                        <span>{{scope.row.desc  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template scope="scope">
                        <span>{{scope.row.status == '0'?'已下架':scope.row.status == '1'?'已上架':'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template scope="scope">
                        <span>{{scope.row.createTime  | isNull}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="120">
                    <template scope="scope">
                        <el-button v-if="scope.row.status == '0'" type="text" class="btn-success" @click="goOnline(scope.row)">上架</el-button>
                        <el-button v-if="scope.row.status == '1'" type="text" class="btn-success" @click="goOnline(scope.row)">下架</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="pagination-container">
                <!-- <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination> -->
            </div>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import { listPackManage, updatePackManage } from 'api/goodsPackManage';
    import { mapState, mapActions } from 'vuex';

  
    export default {
        name: 'goodsPackManage',
        components: { Levelbar },
        data() {
            return { 
                loading: false,
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            queryData() {
                this.pageQuery.currentpage = 1;
                this.loading = true;
                listPackManage(this.pageQuery.currentpage, this.config.pageSize).then(response => {
                    this.loading = false;
                    this.tableData = response.data.content.list;
                    this.pageQuery.total = response.data.content.pagination.total;
                }).catch(() => {
                    this.loading = false;
                });
            },
            goOnline(obj) { 
                let title = obj.status==0?'上架':'下架'
                this.$confirm('是否确认'+title+'该打包商品？', '', {
                    closeOnClickModal: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' ', 
                    title: '  '
                }).then(() => {
                    let state = '';
                    if (obj.status == '0') {
                        state = '1';
                    }
                    if (obj.status == '1') {
                        state = '0';
                    }
                    this.loading = true;
                    updatePackManage(obj.id, state).then(response => {
                        this.loading = false;
                        if (response.data.status == 200) {
                            this.$message.success(response.data.errorMsg);
                            this.queryData();
                        } else {
                            this.$message.error(response.data.errorMsg);
                        }
                    })
                }).catch((e) => {
                    this.loading = false;
                    this.$message.info('已取消');     
                });
            }
        }

    }
</script>

<style lang="scss" scoped>
    .main-content {
       
        .tabelLayout-content {
            background: #fff;
            padding: 20px 20px;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            padding-bottom: 0;
        }
        .pagination-container {
            text-align: right;
            padding-right: 20px;
        }
    }
</style>

